/*
 * @Description:
 * @version: 1.0.0
 * @Author: YinJianFeng
 * @Date: 2024-03-22 11:02:19
 */
import React, { useContext, useEffect, useState } from 'react';
import styled from 'styled-components';

import { IEnvironment, CMEVENTS, Ctx2Context } from '@amcax/base';

import { CmdButton } from './components/CmdButton';
import { CmdDivider } from './components/CmdDivider';
import { CmdSplitButton } from './components/CmdSplitButton';
import { CmdTabItem, CmdTabs } from './components/CmdTabs';
import { CmdUpTabs } from './components/CmdUpTabs';
import { CommandBarParams } from '@app-base/types';

const CommandBarBox = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: absolute;
  bottom: 10px;
  z-index: 1;
  pointer-events: none;
`;

const CommandBarUpBox = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
  top: 0px;
  z-index: 1;
  pointer-events: none;
`;

export function CommandBar(props: CommandBarParams) {
  const { userEvents } = useContext(Ctx2Context);

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [value, setValue] = useState<string>('');
  const [env, setEnv] = useState<IEnvironment>();
  const cmdStyle = props?.style ?? 'down';

  useEffect(() => {
    registerEvents();
  }, []);

  const registerEvents = () => {
    userEvents.on(CMEVENTS.ENV_CHANGED, (_env: IEnvironment) => {
      setValue(_env?.id);
      setEnv(_env);
    });
  };

  const EnvCommandBar = env?.commandBar?.(cmdStyle);

  return EnvCommandBar && cmdStyle === 'down' ? (
    <CommandBarBox>{EnvCommandBar}</CommandBarBox>
  ) : (
    <></>
  );
}

export function CommandUpBar(props: any) {
  const { userEvents } = useContext(Ctx2Context);

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [value, setValue] = useState<string>('');
  const [env, setEnv] = useState<IEnvironment>();
  const cmdStyle = props?.style ?? 'down';

  useEffect(() => {
    registerEvents();
  }, []);

  const registerEvents = () => {
    userEvents.on(CMEVENTS.ENV_CHANGED, (_env: IEnvironment) => {
      setValue(_env?.id);
      setEnv(_env);
    });
  };

  const EnvCommandBar = env?.commandBar?.(cmdStyle);

  return EnvCommandBar && cmdStyle === 'up' ? (
    <CommandBarUpBox>{EnvCommandBar}</CommandBarUpBox>
  ) : (
    <></>
  );
}

export { CmdButton, CmdDivider, CmdSplitButton, CmdTabs, CmdUpTabs };
export type { CmdTabItem };
